<!-- 中国地图 -->
<template>
    <h1>{{ $route.query.name }}</h1>
    <div class="backParent" v-show="currentadcode != 100000"
        @click="returnLastMap(currentMap?.parentadcode as string | number)">返回</div>
    <div class="mapCanvas" ref="echartsMap1" style="height:600px;">

    </div>
</template>

<script setup lang="ts">
import { getCurrentadcode } from "./getChinaAllcity";
import { ref, onMounted, getCurrentInstance, watch, Ref } from "vue";
// 引入type
import { citymodel } from "./types";
import * as echarts from 'echarts';
import axios from 'axios';
// 获取全局配置项
const { proxy } = getCurrentInstance() as any;
const { $echarts, $axios } = proxy;
const echartsMap1 = ref(null);

// 定义当前所有的地图
let allMap: Map<string | number, citymodel> = new Map();

// 当前地图
let currentMap: Ref<null | citymodel> = ref(null);
// echarts实例
let myChart: any, currentadcode: Ref<number | string> = ref(100000);

onMounted(() => {
    allMap.set(100000, {
        name: '中国',
        adcode: 100000,
        url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
        childrenNum: 34,
        center: [0, 0],
        hasRegister: false,  // 是否已经注册在echarts
    })

    currentMap.value = allMap.get(currentadcode.value) as citymodel;

    // 主界面
    myChart = echarts.init(echartsMap1.value);
    renderChart(currentMap.value);

    // 图表跟随屏幕自适应
    window.addEventListener('resize', () => {
        myChart.resize();
    })

    // 地图点击事件
    myChart.on('click', (params: any) => {
        let n = getMapKey(params.name, allMap);
        if (allMap.get(n)?.childrenNum == 0) return;
        (currentadcode.value as number | string) = n;
    })
})

// 监听currentadcode地图值
watch(currentadcode, (newval, oldval) => {

    let nextMap = allMap.get(newval) as citymodel

    // 如果存在子节点
    if (nextMap?.childrenNum && nextMap.childrenNum > 0) {
        currentMap.value = nextMap;

        // 如果出现意外，没呀父节点
        if (currentMap.value.parentadcode == undefined) {
            currentMap.value.parentadcode = oldval;
        }

        renderChart(nextMap);
    }
})

// 获取地图json, 绘制地图
const renderChart = async (cMap: citymodel | null) => {

    // myChart.showLoading(); // 加载动画
    // 访问当前的地图数据
    let { data: mapdata } = await axios.get(cMap?.url);
    console.log(mapdata);

    let currentName = cMap?.name;

    // 判断是否注册过
    if (!cMap?.hasRegister) {
        echarts.registerMap(currentName, mapdata);
        // 当前地图下的地区信息
        let currentCityMap: Map<string | number, citymodel> = getCurrentadcode(mapdata);

        allMap = new Map([...allMap, ...currentCityMap]);
        (allMap.get(cMap?.adcode as string | number) as citymodel).hasRegister = true;
    }

    let option = {
        title: {
            text: `${currentName}地图`,
            left: 'center',
            top: '2%',
            textStyle: {
                color: '#fff'
            }
        },
        // backgroundColor: '#070d18',
        series: [{
            name: `${currentName}地图`,
            //使用上面注册的地图
            map: currentName,
            //初始化类型写地图
            type: "map",
            zoom: 1.4, //当前视角的缩放比例
            roam: false,//鼠标滚轮缩放
            selectedMode: true, // 点击选中区域
            // 区块文字样式
            label: {
                normal: {
                    formatter: '{b}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#05C3F9'
                    }
                }
            },
            // 区块样式
            itemStyle: {
                normal: {
                    areaColor: '#0C356C',
                    borderColor: '#3B5077',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#0C356C',
                    shadowColor: '#1773c3',
                    shadowBlur: 20
                }
            },
            // select: { // 地图选中区域样式 
            //     label:{ // 选中区域的label(文字)样式
            //         color: '#fff'
            //     },
            //     itemStyle: {// 选中区域的默认样式
            //         areaColor: '#256CBE'
            //     },
            // },
            data: [
            ],
        }]
    }

    // myChart.hideLoading();
    myChart.clear();
    myChart.setOption(option, true);
}
// 根据map中数值，获取key
const getMapKey = (value: string, map: Map<string | number, citymodel>): number | string => {
    let arriterator = map.values(), res: number | string = 0;
    for (const iterator of arriterator) {
        if (iterator.name == value) {
            res = iterator.adcode;
            break;
        }
    }

    return res;
}

// 返回上级地图
const returnLastMap = (adcode: string | number) => {
    currentadcode.value = adcode
}
</script>
<style scoped lang="scss">
.backParent {
    position: absolute;
    font-size: 16px;
    color: #fff;
    left: 30px;
    top: 70px;
    font-weight: 700;
    z-index: 1000;
    cursor: pointer;

    &:hover {
        text-shadow: #fff 5px 5px 5px;
    }
}
</style>